<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>文本溢出省略</title>
	<style>
		/* 
		设置文本溢出省略
		首先应该规定好外部父盒子的宽度
		其次 设置文本不换行 即 一行显示   
		设置盒子内容溢出隐藏
		设置文本超出省略
		 */
		#box1 {
			width: 200px;
			border: 1px solid red;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		#box2 {
			width: 100px;
			height: 100px;
			border: 1px solid green;
			overflow: hidden;
		}
		#box2::after {
			display: inline;
			content: '...';
		}
	</style>
</head>

<body>
	<div id="box1">
		按客户对接撒谎客户按客户对接撒谎客户按客户对接撒谎客户按客户对接撒谎客户
		按客户对接撒谎客户按客户对接撒谎客户按客户对接撒谎客户按客户对接撒谎客户
		按客户对接撒谎客户按客户对接撒谎客户按客户对接撒谎客户按客户对接撒谎客户
	</div>
	<div id="box2">
		按客户对接撒谎客户按客户对接撒谎客户按客户对接撒谎客户按客户对接撒谎客户
		按客户对接撒谎客户按客户对接撒谎客户按客户对接撒谎客户按客户对接撒谎客户
		按客户对接撒谎客户按客户对接撒谎客户按客户对接撒谎客户按客户对接撒谎客户
	</div>
	<div id="con">
		<span id="txt">文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略号,文本溢出显示省略</span>
		<span class="t"></span>
	</div>
	<style>
	#txt{
		display: inline-block;
		height: 40px;
		width: 250px;
		line-height: 20px;
		overflow: hidden;
		font-size: 16px;
	}
	.t:after{
		display: inline;
		content: "...";
		font-size: 16px;
		
	}
	</style>
</body>

</html>